<template>
    <div  v-if="data" >
        <div class="bg">
			<img :src="`/marry pic/${this.data[0].mmpic}`" alt="">
			</div>
			<div class="master">
			<div class="card">
				<div class="top" style="box-sizing: border-box;">
					<!-- <img src="./zhuchi4-bg.jpg" alt=""> -->
					<div class="back"  style="padding-top:10px">
					<h2>{{data[0].mname}}</h2> <router-link to="/" style="color:#fff">返回首页</router-link>
					</div>
					<p class="tit" style="font-size:18px;padding-top:10px">主持价格</p>
					<div class="price">
						<table>
							<tr>
								<td>市 区 内：</td>
								<td>{{data[0].mprice}}</td>
							</tr>
							<tr>
								<td>市 区 外：</td>
								<td>+300元</td>
							</tr>
							<tr>
								<td>外 地：</td>
								<td>+1000元</td>
							</tr>
						</table>
					</div>
				</div>

				<div class="middle" style="box-sizing: border-box;">
					<p>个人资料</p>
					<div>
						<p>身高：{{data[0].shengao}}&nbsp;&nbsp;体重：{{data[0].tizhong}}&nbsp;&nbsp;从业年限：{{data[0].nian}}&nbsp;&nbsp;主持场次：{{data[0].changci}}</p>
						<p>联系方式：{{data[0].mphone}}&nbsp;&nbsp;微信号：{{data[0].mvxin}}</p>
						<p>
							{{data[0].mpp}}
						</p>
					</div>
				</div>
				<div class="down">
					<div class="banner">
						<div>
							<img v-for="(x,i) in this.data[0].mpic.split('=')" :key="i" :src="`/marry pic/${x}`" alt="">
							
							<!-- <img src="./zzzz5.jpg" alt=""> -->
						</div>
					</div>
				</div>
			</div>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            getdata() {
                let url='v2/worker/master/'+this.$route.params.index
                this.axios.get(url).then(res=>{
                    console.log('master的res',res)
					this.data=res.data.data
                })
            }
        },
        mounted () {
            this.getdata();

        },
        data() {
            return {
                data: null
            }
        },
    }
</script>

<style lang="scss" scoped>
            .master {
				width:1200px;
                margin: 0 auto;
			}

			.bg img{
				width: 100%;
				height: 100%;
				overflow: hidden;
				position: fixed;
				left: 0;
				top: 0;
				z-index: 0;
				background-size:cover;
			}
    
			.master img {
				width: 100%
			}

			.master .card {
				width: 500px;
				position: relative;
				top: 0;
				left: 700px;

			}

			.top {
				height: 190px;
				background: #bd691b;
				padding: 0 24px;
				color: #fff;
			}

			.top .tit {
				font-size: 20px;
				line-height: 20px;
			}
			.top .back{
				display: flex;
				justify-content: space-between;
			}
			.price {
				font-size: 13px;
				margin-top: 10px;
				display: inline-block;
				line-height: 24px;
				text-align: right;
			}

			.middle {
				background: rgb(189, 114, 45);
				padding: 0 24px
			}

			.middle p {
				line-height: 28px;
				font-size: 13px;
				color: #fff;
			}
</style>